<template>
	<div id="yonghu">
		<div class="firston">
			<el-button type="primary"
				@click="addyh=true"
				>新增账号</el-button>
		</div>
		<ul>
			<li>账号名</li>
			
			<li>角色列表</li>
			<li>操作</li>
		</ul>
		<ul v-for="(item,key,index) in allusers"
			index="index"
			:key="key">
			<li>
				{{item.username}}
			</li>
			<li>
				
				<div v-for="(ele,key) in item.roles"
					
					:key="key"
					>
					    {{ele}}
				</div>
					    
					
			</li>
			
			<li>
				<el-button type="primary">编辑角色</el-button>
				<el-button type="danger">删除角色</el-button>
			</li>
		</ul>
		<addyonghu
			:addyh="addyh"
			:userInfo="userInfo"
			/>
	</div>
</template>

<script>
	import addyonghu from "./addyonghu"
	export default{
		components:{addyonghu},
		data(){
			return {
				addyh:false,
				userInfo:{roles:[]}
			}
		},
		computed:{
			allusers(){
				
				return this.$store.getters.allusers;
			},
			allroles(){
				
				return this.$store.getters.allroles;
			}
		},
		mounted(){
			this.$store.dispatch("loadallusers")
			this.$store.dispatch("loadallroles")
		},
		methods: {
        deleteUser(item){
            if(item.username=="zmt"){
                this.$alert('无法删除该账号', '警告', {
                confirmButtonText: '确定',
                });
            }else{
                this.$http.post(this.$api.deleteUser,{_id:item._id})
                .then((res)=>{
                    this.$message({
                    message: res.message,
                    type: res.success?'success':'danger'
                    });
                    this.$store.dispatch('loadallusers',{api:this.$api.allUsers,pageNum:1,pageSize:10})        
                })
            }
        }
    },
    
    created() {
        this.$store.dispatch('loadallusers',{api:this.$api.allUsers,pageNum:1,pageSize:10})
    },
	}
</script>

<style lang="scss" scoped>
	.firston{
		width: 100%;
		height: 50px;
		border: 1px solid #000;
		line-height: 50px;
		text-align: left;
		
	}
	#yonghu ul {
		
		width: 100%;
		border: 1px solid #000;
		border-top:0;
		display: flex;
		flex-direction: row;
		
		list-style: none;
		li:first-child{
			width: 25%;
			height: 50px;
			line-height: 50px;
		}
		li:nth-of-type(2){
			width: 25%;
			
			border-left: 1px solid #000;
			line-height: 50px;
			
		}
		
		li:last-child{
			width: 50%;
			
			border-left: 1px solid #000;
			line-height: 50px;
		}
	}
</style>